﻿@page "/WebSerials"
@attribute [TabItemOption(Text = "串行设备 WebSerial")]

<a href="https://www.nuget.org/packages/BootstrapBlazor.WebApi#readme-body-tab"><h4>WebSerial</h4></a>

<hr />
<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/DemoShared/Pages/WebSerialPage.razor"><h5>页面源码</h5></a>

<a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/Receive_DSP.ino"><h4>Arduino源码</h4></a>


@*<GroupBox Title="基本用法">
        <div class="row m-3">
            <WebSerial OnReceive="@OnReceive" OnLog="@OnLog" OnError="@OnError" />
        </div>
    </GroupBox>
    <p />
    <p />*@
<GroupBox Title="串口设置">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-md-4">
            <Select Color="Color.Primary" Items="BaudRateList" @bind-Value="@SelectedBaudRate" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.DataBits" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.StopBits" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Select Color="Color.Primary" @bind-Value="@options.FlowControlType" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Select Color="Color.Primary" @bind-Value="@options.ParityType" ShowLabel="true" />
        </div>
    </div>
</GroupBox>
<GroupBox Title="其他功能" class="mt-3">
    <div class="row g-3">
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInputNumber Color="Color.Primary" @bind-Value="@options.BufferSize" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Select Color="Color.Primary" @bind-Value="@options.AutoFrameBreakType" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <BootstrapInput Color="Color.Primary" @bind-Value="@options.FrameBreakChar" ShowLabel="true" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Switch ShowLabel="true" @bind-Value="@options.AutoConnect" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Switch ShowLabel="true" @bind-Value="@options.OutputInHex" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Switch ShowLabel="true" @bind-Value="@options.InputWithHex" />
        </div>
        <div class="col-12 col-sm-6 col-md-4">
            <Switch ShowLabel="true" @bind-Value="@options.AutoGetSignals" />
        </div>
    </div>
</GroupBox>

<GroupBox Title="操作" class="mt-3">
    <div class="mt-3">
        @if (Flag)
        {
            <div class="col-6">
                <WebSerial @ref="WebSerial"
                           OnConnect="@OnConnect"
                           OnReceive="@OnReceive"
                           OnSignals="@OnSignals"
                           OnLog="@OnLog"
                           OnError="@OnError"
                           Options="@options" Debug
                           ShowUI="false" />
            </div>

            <div @ref="WebSerial.Element">
                <div class="row m-3">
                    <div class="col-12">
                        <BootstrapInputGroup>
                            <Button data-action="butConnect" Text="@options.ConnectBtnTitle" />
                            @if (!IsConnected)
                            {
                                <Button Text="关闭" OnClick="OnApply" Icon="fa-fw fa-solid fa-close" />
                            }
                            else
                            {
                                <Button Text="@options.GetSignalsBtnTitle" OnClick="WebSerial.GetSignals" />
                            }
                        </BootstrapInputGroup>
                    </div>
                </div>
                <div class="row m-3">
                    <div class="col-6">
                        <textarea class="form-control" type="text" data-action="fname" style="visibility:hidden;" />
                    </div>
                    <div class="col-6">
                        <Button data-action='butwrite' style="visibility:hidden;" Text="@options.WriteBtnTitle" />
                    </div>
                </div>
                @if (WebSerial != null && IsConnected)
                {
                    <div class="row m-3">
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            <Switch @bind-Value="WebSerial.DTR" ShowLabel="true" OnValueChanged="WebSerial.SetSignalDTR" />
                        </div>
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            <Switch @bind-Value="WebSerial.RTS" ShowLabel="true" OnValueChanged="WebSerial.SetSignalRTS" />
                        </div>
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            <Switch @bind-Value="WebSerial.Break" ShowLabel="true" OnValueChanged="WebSerial.SetSignalBreak" />
                        </div>
                    </div>
                    <div class="row m-3">
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            RING
                            <Light Color="@(Signals.RING?Color.Success:Color.None)"></Light>
                        </div>
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            DSR
                            <Light Color="@(Signals.DSR?Color.Success:Color.None)"></Light>
                        </div>
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            CTS
                            <Light Color="@(Signals.CTS?Color.Success:Color.None)"></Light>
                        </div>
                        <div class="col-12 col-sm-4 col-md-3 col-lg-auto">
                            DCD
                            <Light Color="@(Signals.DCD?Color.Success:Color.None)"></Light>
                        </div>
                    </div>
                }
            </div>
            <pre data-action="log"></pre>

        }
        else
        {
            <div class="col-6">
                <Button Text="应用" OnClick="OnApply" Icon="fa-fw fa-solid fa-play" />
            </div>
        }
    </div>
</GroupBox>

<section ignore>
    <p>注意:本例子改变设置要点关闭再重新应用</p>
    <pre style="overflow-y:scroll;max-height:500px;">@_message</pre>
    <pre style="color:green">@_statusMessage</pre>
    <pre style="color:red">@_errorMessage</pre>
    <hr />
    <a href="https://github.com/densen2014/Densen.Extensions/blob/master/Demo/Receive_DSP.ino">附件: Arduino源码示例</a>
</section>

<AttributeTable Items="@GetAttributes()" />

<AttributeTable Title="串口选项 Options" Items="@GetWebSerialOptionsAttributes()" />

